import React, { useEffect, useRef, useState } from 'react';
import { View } from '@tarojs/components';
import './index.scss';

const TheButton = ({ txt = '确定', disabled = false, handleOp = null }) => {
  const [lock, setLock] = useState(false);
  const timer = useRef(null);
  useEffect(() => {
    if (lock && timer.current == null) {
      timer.current = setTimeout(() => {
        setLock(false);
        timer.current = null;
      }, 2000);
    }
  }, [lock]);
  const handleClick = () => {
    if (lock) return;
    handleOp && handleOp();
  };
  return (
    <View
      className={'TheButton customePageBackgroundStyle ' + (disabled || lock ? 'disabled' : '')}
      onClick={() => {
        setLock(true);
        handleClick();
      }}
    >
      {txt}
    </View>
  );
};

export default TheButton;
